<template>
	<page :nav="false" ref="pageRef" class="relative">
		<view v-if="!showStore" class="wrapper" :style="
                active == 0
                    ? 'background-color:#fff'
                    : active == 1
                    ? 'background-image:url(' + ossurl.welfare.toysBg + ')'
                    : 'background-image:url(' + ossurl.welfare.blessings.blessingsBg + ')'
            ">
			<view class="pagae-nav" :style="{ paddingTop: statusBarHeight + 'px', background: headerBg }">
				<view class="flex-column-align-center;nav-title">福利</view>
			</view>
			<view style="height: 72rpx"></view>
			<view class="tabs flex-align" :style="{ top: statusBarHeight + 36 + 'px', background: headerBg }">
				<view v-for="(item, index) in tabData" :key="item.value" class="marginR15 tabItem"
					:class="{ active: active == index }" @click="changeActive(item)">
					<image class="image" :src="active == index ? item.activeIcon : item.icon" />
				</view>
			</view>
			<view>
				<room v-if="active >= 0 && tabData[active].value === 'room'" ref="room"
					:statusBarHeight="statusBarHeight" />

				<wish v-else-if="active >= 0 && tabData[active].value === 'wish'" :statusBarHeight="statusBarHeight" />
				<activity v-else-if="active >= 0 && tabData[active].value === 'activity'"
					:statusBarHeight="statusBarHeight" :id="activityId" />
				<catch-doll v-else-if="active >= 0 && tabData[active].value === 'claw'"
					:statusBarHeight="statusBarHeight" />
			</view>
		</view>
		<store-page v-else> </store-page>
	</page>
</template>

<script>
	import loginMixin from '@/mixin/login'
	import room from './room'
	import topic from './topic'
	import reel from './reel'
	import wish from './wish'
	import activity from './activity'
	import catchDoll from './catchDoll'
	import store from '@/store'
	import {
		SET_PID
	} from '@/store/mutation-types'
	import ossurl from '@/utils/ossurl'
	import storePage from '@/pages/store/store.vue'
	const TAB_DATA = [{
		icon: ossurl.welfare.room,
		activeIcon: ossurl.welfare.roomActive,
		value: 'room',
		name: '房间'
	}]

	const TAB_DATA_HIDE = [{
			icon: ossurl.welfare.room,
			activeIcon: ossurl.welfare.roomActive,
			value: 'room',
			name: '房间'
		},
		// {
		//     icon: ossurl.welfare.toysIcon,
		//     activeIcon: ossurl.welfare.toysActive,
		//     value: 'claw',
		//     name: '扭蛋机'
		// },
		{
			icon: ossurl.welfare.wish,
			activeIcon: ossurl.welfare.wishActive,
			value: 'wish',
			name: '祈福'
		}
	]
	const TAB_DATA_HIDE2 = [{
			icon: ossurl.welfare.room,
			activeIcon: ossurl.welfare.roomActive,
			value: 'room',
			name: '房间'
		},
		{
			icon: ossurl.welfare.toysIcon,
			activeIcon: ossurl.welfare.toysActive,
			value: 'claw',
			name: '扭蛋机'
		},
		{
			icon: ossurl.welfare.wish,
			activeIcon: ossurl.welfare.wishActive,
			value: 'wish',
			name: '祈福'
		}
	]
	export default {
		components: {
			room,
			topic,
			reel,
			wish,
			activity,
			catchDoll,
			storePage
		},
		mixins: [loginMixin],
		data() {
			return {
				ossurl,
				active: 0,
				activityId: null,
				showRedFloat: false,
				scrollTop: 0,
				userInfo: null,
				roomNdj: false,
				showStore: true
			}
		},
		computed: {
			statusBarHeight() {
				if (this.$store.state.systemInfo) {
					return this.$store.state.systemInfo.statusBarHeight
				}
				return 20
			},
			tabData() {
				return !this.$store.state.hide ?
					this.roomNdj ?
					TAB_DATA_HIDE2 :
					TAB_DATA_HIDE :
					TAB_DATA
			},
			headerBg() {
				return this.scrollTop > 0 ? '#fff' : 'transparent'
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onShow(option) {
			this.getParamConfig()
			// this.getUser()
			if (!!getApp().globalData.wealActive || getApp().globalData.wealActive === 0) {
				this.active = getApp().globalData.wealActive
				getApp().globalData = {}
			}
			this.refresh()
		},
		mounted() {
			this.loadActivity()
		},
		onTabItemTap() {
			this.loadActivity()
		},
		onShareAppMessage(res) {
			return {
				title: '超多羊毛快来薅',
				path: '/pages/weal/index'
			}
		},
		onShareTimeline() {
			return {
				title: '超多羊毛快来薅'
			}
		},
		methods: {
			async getParamConfig() {
				const res = await this.$service.user.getParamConfig('room_ndj')
				this.roomNdj = res.state != 0

				const weal_config = await this.$service.user.getParamConfig('weal_config')
				if (weal_config.state != 0) {
					this.showStore = false
				} else {
					this.showStore = true
				}

			},
			async getUser() {
				const res = await this.$service.user.getInfo()
				this.userInfo = res
			},
			async loadActivity() {
				this.getActivity()
				const res = await this.$service.weal.activityTab()
				if (res) {
					this.activityId = res.id
				} else {}
			},
			changeActive(item) {
				for (let i = 0; i < this.tabData.length; i++) {
					if (this.tabData[i].value === item.value) {
						this.active = i
						break
					}
				}
			},
			init() {
				let active = this.active
				this.active = -1
				this.$nextTick(() => {
					this.active = active
				})
			},
			refresh() {
				if (this.active < 0) return
				if (this.tabData[this.active].value === 'room') {
					this.$refs.room && this.$refs.room.refresh()
				} else if (this.tabData[this.active].value === 'reel') {
					this.$refs.reel && this.$refs.reel.init()
				}
			},
			async getActivity() {
				const res = await this.$service.weal.redPacketRainInfo()
				this.showRedFloat = !!res
			}
		}
	}
</script>

<style></style>
<style lang="scss" scoped>
	.wrapper {
		min-height: 100vh;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.pagae-nav {
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 100;

		.nav-title {
			height: 80rpx;
			font-size: 32rpx;
			font-family: Source Han Sans, Source Han Sans;
			font-weight: bold;
			color: #000000;
		}
	}

	.tabs {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 100;
		padding: 12rpx 20rpx;

		.tabItem {
			color: rgba(0, 0, 0, 0.5);
			font-size: 32rpx;
			text-align: center;

			.image {
				width: 158rpx;
				height: 58rpx;
			}
		}
	}

	.bg {
		position: fixed;
		z-index: -1;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0.3;
	}

	.red-float {
		position: fixed;
		right: 10rpx;
		bottom: 500rpx;
		width: 116rpx;
		height: 86rpx;
		animation: red 0.5s linear infinite;
	}

	@keyframes red {
		0% {
			transform: rotateZ(-10deg);
		}

		25% {
			transform: rotateZ(0deg);
		}

		50% {
			transform: rotateZ(10deg);
		}

		75% {
			transform: rotateZ(0deg);
		}

		100% {
			transform: rotateZ(-10deg);
		}
	}
</style>